<template>
	<view class="personal-data-page">
		<!-- 其它 --><view class="root-wrap">
			<!-- 头像 -->
			<view class="roots">
				<view class="roots-item" style="margin: auto;">
					<span style="margin-left: 10rpx;">头像</span>
					<view style="display: flex;align-items: center;">
						<image :src="img" @click="onupdateimg"
							style="width: 140rpx;height: 140rpx;border-radius: 20rpx ;"></image>
						<van-icon name="arrow" style="margin-right: 10rpx;" />
					</view>
				</view>
				<van-cell-group inset>
				  <!-- 账号id -->
				  <van-field v-model="uid"  label="账号id" input-align="right"/>
				  <!-- 姓名 -->
				  <van-field v-model="name" label="真实姓名" 
				  input-align="right"/>
				  <!-- 性别 -->
				  <van-field v-model="gender"  label="性别"
				  input-align="right"/>
				  <!-- 输入手机号，调起手机号键盘 -->
				  <van-field v-model="phone" type="tel" label="手机号" 
				  input-align="right"/>
				  <!-- ip地址 -->
				  <van-field v-model="home"  label="ip地址" 
				  input-align="right"/>
				</van-cell-group>

			</view>
			<!-- 退出按钮 -->
			<van-button type="primary" size="large" 
			@click="updateHandler">确定</van-button>
		</view>

	</view>
</template>

<script setup>
	import {useStore} from 'vuex'
	import api from './../../lib/request.js'
	import {
		onMounted,
		ref
	} from 'vue'
import { showConfirmDialog } from 'vant';
import {onLoad} from '@dcloudio/uni-app';

	let store = useStore()
	let id = ref(store.state.uid)
	let name = ref('')
	let gender = ref('')
	let home = ref('')
	let phone = ref('')
	let uid = ref('')
	let img =ref('../../static/doc.png')
	//修改头像
	function onupdateimg(){
		uni.chooseImage({
			count:1,
			success:res=>{
				let file = res.tempFiles[0]	
				// 发送请求
				uni.uploadFile({
					// url: '/api/client/user/profile',
					// name: 'img',
					// file: file,//要上传的文件对象
					// success: res => {
					// 	let data = JSON.parse(res.data)
					// 	// 判断是否登录
					// 	if (data.code) {
					// 		return this.not()
					// 	}
					// 	this.img = data.data.img
					// 	// app.globalData.userInfo.img = data.data.img
					// 	// 将图片存储到本地localStorage
					// 	uni.setStorageSync('profile',this.img)
					// }
				})
			}
		})
	}
	
	// 修改
	const updateUser = async () => {
		let res = await api.update('/user/updateUser', {
			name:name.value,
			gender:gender.value,
			home:home.value,
			phone:phone.value,
			id:uid.value})
		if(res.code){
			showConfirmDialog({
			  title: '修改信息',
			  message:
			    '确认要修改吗？',
			})
			  .then(() => {
				uni.navigateBack()
			  })
		}
	}
	// 确认修改
	const updateHandler = () => {
		store.commit('update_good','')
		updateUser();
	}
	
	// 初始化
	onLoad(()=>{
		api.get(`/user/findUserById/${id.value}`,).then(res=>{
			let {home:h,name:n,phone:p,id:d,gender:g} = res.data
			name.value = n
			gender.value = g
			home.value = h
			phone.value = p
			uid.value = d
		})
	})

	
</script>

<style>
	.personal-data-page {
		height: calc(100vh - 44px);
		background-color: #f8f8f8;
		overflow-y: scroll;
		border: none;
	}

	/*其它 */
	.root-wrap {
		/* height: 900rpx; */
		/* height: calc(100vh - 300px); */
		background-color: #fff;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.roots-item {
		width: 700rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		border-bottom: 1px solid rgb(245, 245, 245);
	}

	/* 退出登录 */
	.van-button {
		position: absolute;
		bottom: 10px;
	}

	.van-cell-group {
		width: 100vw;
	}
</style>